<template>
	<globalModal
		centered
		:bodyStyle="{
			maxHeight: '800px'
		}"
		:title="title"
		:visible="visible"
		width="90%"
		@cancel="handleCancel"
		:destroyOnClose="true"
		:maskClosable="false"
		:footer="null"
	>
		<video class="flex-1" style="max-height: calc(100% - 105px)" :src="videoUrl" autoplay muted loop></video>
	</globalModal>
</template>

<script>
export default {
	// components: { tempChart },

	name: 'detailModel',
	data() {
		return {
			confirmLoading: false,
			title: '',
			visible: false,
			videoUrl: ''
		};
	},
	created() {},
	methods: {
		handleCancel(videoUrl) {
			this.visible = false;
			this.confirmLoading = true;
		},
		show(videoUrl) {
			this.confirmLoading = false;
			this.visible = true;
			this.title = '监控视频';
			this.videoUrl = videoUrl;
		}
	}
};
</script>

<style lang="less" scoped>
video {
	width: 100%;
	// height: 100%;
	height: calc(100vh - 210px - 105px);
	max-height: 800px;
	object-fit: cover;
}
</style>
